<template>
  <div class="h-full flex flex-col">
    <!-- <Draggable>
      <div class="h-[100px] w-[160px]">AI生成内容</div>
    </Draggable> -->
    <div class="model-header">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="8" :md="6" :lg="4" :xl="3" class="mb-[15px]">
          <el-input v-model="queryData.id" placeholder="请输入子任务ID" />
        </el-col>
        <el-col
          :xs="24"
          :sm="12"
          :md="10"
          :lg="7"
          :xl="5"
          class="mb-[15px] radio4"
        >
          <el-radio-group v-model="queryData.type">
            <el-radio-button label="标注中 22" value="1" />
            <el-radio-button label="已驳回 0" value="2" />
            <el-radio-button label="待审核 0" value="3" />
            <el-radio-button label="已完成 7" value="4" />
          </el-radio-group>
        </el-col>
        <el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4" class="mb-[15px]">
          <el-button class="w-[80px]" color="#626aef" type="primary">
            查询
          </el-button>
        </el-col>
      </el-row>
    </div>
    <div class="sheet flex-1 overflow-auto mt-[10px]">
      <!-- <div>用户信息: {{ userInfos }}</div> -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="id"
          label="子任务ID"
          width="140"
          align="center"
        />
        <el-table-column
          prop="taskName"
          label="任务名称"
          width="280"
          align="center"
        >
          <template #default="{ row }">
            <div class="truncate-text" :title="row.taskName">
              {{ row.taskName }}
            </div>
          </template></el-table-column
        >
        <el-table-column prop="labeledNum" label="数据量" align="center" />
        <el-table-column prop="points" label="积分" align="center" />
        <el-table-column prop="points" label="标注案例" align="center" />
        <el-table-column prop="name" label="子任务状态" align="center">
          <template #default="{ row }">
            <el-tag
              effect="dark"
              :type="row.taskStatus === 1 ? 'info' : 'success'"
            >
              {{ row.taskStatus === 1 ? '标注中' : '已完成' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ctime" label="分配时间" align="center" />
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <el-button type="primary" text>
              <SvgIcon
                class="mr-[2px]"
                name="examine"
                size="16px"
                color="#409EFF"
              />
              <span>查看</span>
            </el-button>
            <el-button type="primary" text>
              <DocumentChecked class="w-[18px] h-[18px] mr-[2px]" />
              <span>提交审核</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex justify-center py-[15px] border-t">
      <el-pagination
        v-model:current-page="queryData.pageNum"
        v-model:page-size="queryData.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        :total="tableData.length"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, defineAsyncComponent, reactive } from 'vue';
  import { storeToRefs } from 'pinia';
  import { useUserInfo } from '@/store/user';
  import { useRouter } from 'vue-router';

  const SvgIcon = defineAsyncComponent(
    () => import('@/components/SvgIcon.vue'),
  );
  const Draggable = defineAsyncComponent(
    () => import('@/components/Draggable.vue'),
  );

  const router = useRouter();
  const userStores = useUserInfo();
  const { userInfos } = storeToRefs(userStores);

  const queryData = reactive({
    id: '', //子任务id
    type: '', //标注类型
    pageNum: 1, //页码
    pageSize: 10, //页数
  });

  const tableData = [
    {
      assamplingRatio: 0,
      ctime: '2025-02-26 18:26:23',
      hasExample: 1,
      id: '2502261003',
      labeledNum: 11,
      labeledType: 2,
      llmId: 35,
      passCount: null,
      passRate: null,
      points: 11,
      reviewCount: 0,
      reviewName: '系统',
      singlePoints: 1,
      status: 0,
      taskId: 150,
      taskName: '语义质检-包类模型-粤语复核5',
      taskStatus: 1,
      userId: '7',
      username: '陈松青',
    },
    {
      assamplingRatio: 0,
      ctime: '2025-02-26 11:29:52',
      hasExample: 1,
      id: '2502261001',
      labeledNum: 24,
      labeledType: 2,
      llmId: 35,
      passCount: null,
      passRate: null,
      points: 24,
      reviewCount: 0,
      reviewName: '系统',
      singlePoints: 1,
      status: 0,
      taskId: 149,
      taskName: '语义质检-包类模型-粤语复核4',
      taskStatus: 1,
      userId: '7',
      username: '陈松青',
    },
    {
      assamplingRatio: 0,
      ctime: '2025-02-20 15:35:41',
      hasExample: 1,
      id: '2502201001',
      labeledNum: 20,
      labeledType: 2,
      llmId: 35,
      passCount: null,
      passRate: null,
      points: 20,
      reviewCount: 0,
      reviewName: '系统',
      singlePoints: 1,
      status: 0,
      taskId: 148,
      taskName: '语义质检-包类模型-粤语3',
      taskStatus: 1,
      userId: '7',
      username: '陈松青',
    },
    {
      assamplingRatio: 0,
      ctime: '2025-02-14 10:10:52',
      hasExample: 1,
      id: '2502141005',
      labeledNum: 23,
      labeledType: 2,
      llmId: 35,
      passCount: null,
      passRate: null,
      points: 23,
      reviewCount: 0,
      reviewName: '系统',
      singlePoints: 1,
      status: 0,
      taskId: 142,
      taskName: '语义质检-包类模型-粤语复核1',
      taskStatus: 1,
      userId: '7',
      username: '陈松青',
    },
    {
      assamplingRatio: 10,
      ctime: '2025-02-14 09:26:30',
      hasExample: 1,
      id: '2502141003',
      labeledNum: 20,
      labeledType: 1,
      llmId: 29,
      passCount: null,
      passRate: null,
      points: 200,
      reviewCount: 0,
      reviewName: '邓吉森',
      singlePoints: 10,
      status: 0,
      taskId: 144,
      taskName: '测试2-ytuhtry',
      taskStatus: 1,
      userId: '7',
      username: '陈松青',
    },
    {
      assamplingRatio: 0,
      ctime: '2025-02-13 08:53:31',
      hasExample: 1,
      id: '2502131001',
      labeledNum: 191,
      labeledType: 2,
      llmId: 35,
      passCount: null,
      passRate: null,
      points: 191,
      reviewCount: 0,
      reviewName: '系统',
      singlePoints: 1,
      status: 0,
      taskId: 141,
      taskName: '语义质检-包类模型-测试11',
      taskStatus: 1,
      userId: '7',
      username: '陈松青',
    },
    {
      assamplingRatio: 0,
      ctime: '2025-01-10 11:41:58',
      hasExample: 1,
      id: '2501101002',
      labeledNum: 424,
      labeledType: 2,
      llmId: 44,
      passCount: null,
      passRate: null,
      points: 424,
      reviewCount: 0,
      reviewName: '系统',
      singlePoints: 1,
      status: 0,
      taskId: 134,
      taskName: '营销不规范分类模型-测试2',
      taskStatus: 1,
      userId: '7',
      username: '陈松青',
    },
    {
      assamplingRatio: 0,
      ctime: '2025-01-10 11:40:13',
      hasExample: 1,
      id: '2501101001',
      labeledNum: 10,
      labeledType: 2,
      llmId: 44,
      passCount: null,
      passRate: null,
      points: 10,
      reviewCount: 0,
      reviewName: '系统',
      singlePoints: 1,
      status: 0,
      taskId: 133,
      taskName: '营销不规范分类模型-测试',
      taskStatus: 1,
      userId: '7',
      username: '陈松青',
    },
    {
      assamplingRatio: 0,
      ctime: '2024-12-20 11:25:30',
      hasExample: 1,
      id: '2412201001',
      labeledNum: 10,
      labeledType: 2,
      llmId: 43,
      passCount: null,
      passRate: null,
      points: 10,
      reviewCount: 0,
      reviewName: '系统',
      singlePoints: 1,
      status: 0,
      taskId: 129,
      taskName: '商机/风险模型-测试3',
      taskStatus: 1,
      userId: '7',
      username: '陈松青',
    },
    {
      assamplingRatio: 0,
      ctime: '2024-12-16 11:23:48',
      hasExample: 1,
      id: '2412161002',
      labeledNum: 1,
      labeledType: 2,
      llmId: 43,
      passCount: null,
      passRate: 100,
      points: 1,
      reviewCount: 1,
      reviewName: '系统',
      singlePoints: 1,
      status: 3,
      taskId: 126,
      taskName: '商机/风险模型-测试2',
      taskStatus: 2,
      userId: '7',
      username: '陈松青',
    },
  ];

  const handleSizeChange = (val: number) => {
    queryData.pageSize = val;
  };

  const handleCurrentChange = (val: number) => {
    queryData.pageNum = val;
  };

  const skipDatabase = (name: string) => {
    router.push({
      path: '/model/manage/database',
      query: { modelName: name },
    });
  };
</script>

<style scoped>
  .el-button {
    padding: 5px !important;
  }
</style>
